Top React Hooks — Speech, Throttling, and Scrolling

Hooks contains our logic code in our React app.

We can create our own hooks and use hooks provided by other people.

In this article, we’ll look at some useful React hooks.

React Recipes

React Recipes comes with many hooks that we can use to do various things.

We can use the useSpeechSynthesis hook lets us add speech synthesis to our React app.

For instance, we can write:

import React from "react";
import { useSpeechSynthesis } from "react-recipes";

export default function App() {
  const [value] = React.useState("hello world");
  const [ended, setEnded] = React.useState(false);
  const onEnd = () => setEnded(true);
  const { cancel, speak, speaking, supported, voices } = useSpeechSynthesis({
    onEnd
  });

  if (!supported) {
    return "Speech is not supported. Upgrade your browser";
  }

  return (
    <div>
      <button onClick={() => speak({ text: value, voice: voices[0] })}>
        Speak
      </button>
      <button onClick={cancel}>Cancel</button>
      <p>{speaking && "Voice is speaking"}</p>
      <p>{ended && "Voice has ended"}</p>
    </div>
  );
}

We have the useSpeechSynthesis hook to return an object with various properties.

cancel cancels speech synthesis.

speak makes the computer start speaking.

speaking indicates that it’s speaking.

supported indicates whether speech synthesis is supported.

voices has the voices we can choose from.

We use it in the speak function.

The useThrottle hook lets us throttle value to change only after a given number of milliseconds.

For instance, we can write:

import React from "react";
import { useThrottle, useInterval } from "react-recipes";

const Count = ({ count }) => {
  const throttledCount = useThrottle(count, 950);

  return (
    <>
      <div>Value: {count}</div>
      <div>Throttled value: {throttledCount}</div>
    </>
  );
};

export default function App() {
  const [count, setCount] = React.useState(0);
  useInterval(() => {
    setCount(count => count + 1);
  }, 1000);

  return (
    <>
      <Count count={count} />
    </>
  );
}

We have the Count component which we have the useThrottle hook to watch the count prop.

The 2nd argument is the number of milliseconds to watch.

The useWhyDidYouUpdate lets us watch why a component updates.

For example, we can write:

import React from "react";
import { useWhyDidYouUpdate } from "react-recipes";

const Counter = React.memo(props => {
  useWhyDidYouUpdate("Counter", props);
  return <div>{props.count}</div>;
});

export default function App() {
  const [count, setCount] = React.useState(0);

  return (
    <>
      <button onClick={() => setCount(count => count + 1)}>increment</button>
      <p>
        <Counter count={count} />
      </p>
    </>
  );
}

to watch the count prop updating.

We used the useWhyDidYouUpdate to watch for the prop value changes.

The argument is the name we add to the log.

The 2nd is the value.

The useWindowScroll hook lets us re-render on window scroll.

For example, we can write:

import React from "react";
import { useWindowScroll } from "react-recipes";

export default function App() {
  const { x, y } = useWindowScroll();

  return (
    <>
      <div style={{ position: "fixed" }}>
        <div>x: {x}</div>
        <div>y: {y}</div>
      </div>
      {Array(1000)
        .fill()
        .map((_, i) => (
          <p>{i}</p>
        ))}
    </>
  );
}

We have the useWindowScroll to watch for the scroll position in our React component.

It returns and x and y coordinate for the scroll position.

Conclusion

React Recipes lets us add speech synthesis capabilities to our app.

We can also use it to throttle and watch for prop changes, and also watch for scroll positions.